import { View } from '@tarojs/components'
import { Qr } from '@taroify/icons'
import { memo } from 'react'
import { GroupQrcode } from '../../interface'
import './index.scss'

interface Props {
  data: GroupQrcode
}

function GroupQrcodeCell({ data }: Props) {
  return (
    <View className='group-qrcode-cell'>
      {/* 头部信息 */}
      <View className='group-qrcode-cell__header'>
        <View className='group-qrcode-cell__name'>{data.name}</View>
      </View>

      {/* 扫码数据 */}
      <View className='group-qrcode-cell__stats'>
        <View className='group-qrcode-cell__stat'>
          <View className='group-qrcode-cell__stat-value'>{data.todayScanCount}</View>
          <View className='group-qrcode-cell__stat-label'>扫码入群客户数</View>
        </View>
        <View className='group-qrcode-cell__stat'>
          <View className='group-qrcode-cell__stat-value'>{data.totalScanCount}</View>
          <View className='group-qrcode-cell__stat-label'>今日扫码入群客户数</View>
        </View>
        <View className='staff-qrcode-cell__qrcode'>
          <Qr color='#4575C9' />
        </View>
      </View>

      {/* 创建信息 */}
      <View className='group-qrcode-cell__info'>
        <View className='group-qrcode-cell__info-item'>
          <View className='group-qrcode-cell__info-label'>创建时间：</View>
          <View className='group-qrcode-cell__info-value'>{data.createTime}</View>
        </View>
        <View className='group-qrcode-cell__info-item'>
          <View className='group-qrcode-cell__info-label'>创建人：</View>
          <View className='group-qrcode-cell__info-value'>{data.creator}</View>
        </View>
      </View>
    </View>
  )
}

export default memo(GroupQrcodeCell)
